<!doctype html>
<!--[if lt IE 7 ]> <html lang="en" class="ie6"> <![endif]-->
<!--[if IE 7 ]>    <html lang="en" class="ie7"> <![endif]-->
<!--[if IE 8 ]>    <html lang="en" class="ie8"> <![endif]-->
<!--[if IE 9 ]>    <html lang="en" class="ie9"> <![endif]-->
<!--[if !IE]><!--> <html lang="en"> <!--<![endif]-->
<head>
	<meta charset="utf-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	<meta name="renderer" content="webkit" />
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
	<script type="text/javascript" src="book/third/jquery.min.1.7.js"></script>
	<script type="text/javascript" src="book/third/jquery-ui-1.8.20.custom.min.js"></script>
	<script type="text/javascript" src="book/third/jquery.mousewheel.min.js"></script>
	<script type="text/javascript" src="book/js/turn.min.js"></script>
	<script type="text/javascript" src="book/js/hash.js"></script>
	<script type="text/javascript" src="/pages.js"></script>
	<link rel="stylesheet" href="/atom-one-dark.min.css" />
	<link rel="stylesheet" href="book/css/jquery.ui.css" />
	<link rel="stylesheet" href="book/css/main.css" />
	<link rel="stylesheet" href="book/css/book.css" />
	<style>
		#mainContainer { display: none; position: absolute; top: 0; right: 0; left: 0; bottom: 0; overflow-x: hidden; overflow-y: auto; word-wrap: break-word; background: white; }
		#canvas { display: none; }
		.sj-book .p1, .sj-book .pend{background-image:url(<%cover%>) !important; }
	</style>
</head>
<body>
	<div id="canvas">
		<div class="zoom-icon zoom-icon-in"></div>
		<div id="book-zoom">
			<div class="sj-book">
				<div depth="5" class="hard"> <div class="side"></div> </div>
				<div depth="5" class="hard front-side"><div class="depth"></div></div>
				<div class="hard fixed back-side p<%preEndPage%>"><div class="image"></div><div class="depth"></div></div>
				<div class="hard pend p<%pageCount%>"></div>
			</div>
		</div>
		<div id="slider-bar" class="turnjs-slider">
			<div id="slider"></div>
		</div>
	</div>
	<div id="mainContainer">
		<%children%>
	</div>
	
	<script type="text/javascript">
	var corner;
	function updateDepth(book, newPage, event) {
		var page = book.turn('page');
		var pages = book.turn('pages');
		var depthWidth;
		newPage = newPage || page;
		if ((event === 'start' && /l/.test(corner)) || (event === 'end' && /r/.test(corner))) {
			depthWidth = Math.max(16*Math.min(1, page/pages), 3);
			if (newPage>3) {
				$('.sj-book .p2 .depth').css({
					width: depthWidth,
					left: 20 - depthWidth
				});
			} else {
				$('.sj-book .p2 .depth').css({width: 0});
			}
		}
		if ((event === 'start' && /r/.test(corner)) || (event === 'end' && /l/.test(corner))) {
			depthWidth = Math.max(16*Math.min(1, (pages-page)/pages), 3);
			if (newPage<=pages-3) {
				$('.sj-book .p<%preEndPage%> .depth').css({
					width: depthWidth,
					right: 20 - depthWidth
				});
			} else {
				$('.sj-book .p<%preEndPage%> .depth').css({width: 0});
			}
		}
	}
	function loadPage(page) {
		if (<%build%>) {
			setTimeout(()=>{
				$('.sj-book .p' + page).html(pageHtmlList[page]);
			}, 0);
		} else {
			$.ajax({url: '/pages/'+page+'.html'}).done(function(pageHtml) {
				$('.sj-book .p' + page).html(pageHtml);
			});
		}
	}
	function addPage(page, book) {
		var id, pages = book.turn('pages');
		if (!book.turn('hasPage', page)) {
			var element = $('<div />', {
				'class': 'own-size',
				css: {width: 460, height: 582}
			}).html('<div class="loader"></div>');
			if (book.turn('addPage', element, page)) {
				loadPage(page);
			}
		}
	}
	function numberOfViews(book) {
		return book.turn('pages') / 2 + 1;
	}
	function getViewNumber(book, page) {
		return parseInt((page || book.turn('page'))/2 + 1, 10);
	}
	function moveBar(yes) {
		$('#slider .ui-slider-handle').css({zIndex: yes ? -1 : 10000});
	}
	function setPreview(view) {
		var previewWidth = 55,
		previewHeight = 40,
		preview = $(_thumbPreview.children(':first')),
		numPages = (view==1 || view==$('#slider').slider('option', 'max')) ? 1 : 2,
		width = (numPages==1) ? previewWidth/2 : previewWidth;

		_thumbPreview.
		addClass('no-transition').
		css({width: width + 15,
			height: previewHeight + 15,
			top: -previewHeight - 30,
			left: ($($('#slider').children(':first')).width() - width - 15)/2
		});

		preview.css({
			width: width,
			height: previewHeight,
			display: 'flex',
			'align-items': 'center',
			'justify-content': 'space-around',
		});
		let page = (view-1)*2-2;
		if (numPages==1) {
			if (page < 0) {
				page = '封面';
			} else {
				page = '封底';
			}
			preview.html(`<span>${page}</span>`)
		} else {
			preview.html(`<span>${page}</span><span>${page+1}</span>`)
		}
	}
	function isChrome() {
		// Chrome's unsolved bug
		// http://code.google.com/p/chromium/issues/detail?id=128488
		return navigator.userAgent.indexOf('Chrome')!=-1;

	}
	function zoomIn() {
		var rate = Math.min($('body').width() / 960, $('body').height() / 600);
		$('#slider-bar').hide();
		$('.zoom-icon').removeClass('zoom-icon-in').addClass('zoom-icon-out');
		$('#book-zoom').css('transform', 'scale('+rate+')');
		window.zoomRate = rate;
	}
	function zoomOut() {
		$('#slider-bar').fadeIn();
		$('.zoom-icon').removeClass('zoom-icon-out').addClass('zoom-icon-in');
		$('#book-zoom').css('transform', 'scale(1)');
		window.zoomRate = 1;
	}
	function loadApp() {
		var flipbook = $('.sj-book');

		// Check if the CSS was already loaded
		if (flipbook.width()==0 || flipbook.height()==0) {
			setTimeout(loadApp, 10);
			return;
		}

		// Slider
		$( "#slider" ).slider({
			min: 1,
			start: function(event, ui) {
				if (!window._thumbPreview) {
					_thumbPreview = $('<div />', {'class': 'thumbnail'}).html('<div></div>');
					setPreview(ui.value);
					_thumbPreview.appendTo($(ui.handle));
				} else
				setPreview(ui.value);
				moveBar(false);
			},
			slide: function(event, ui) {
				setPreview(ui.value);
			},
			stop: function() {
				if (window._thumbPreview) {
					_thumbPreview.removeClass('show');
				}
				$('.sj-book').turn('page', Math.max(1, $(this).slider('value')*2-2));
			}
		});

		// URIs
		Hash.on('^page\/([0-9]*)$', {
			yep: function(path, parts) {
				var page = parts[1];
				if (page!==undefined && $('.sj-book').turn('is')) {
					$('.sj-book').turn('page', page);
				}
			},
			nop: function(path) {
				if ($('.sj-book').turn('is')) {
					$('.sj-book').turn('page', 1);
				}
			}
		});

		// Arrows
		$(document).keydown(function(e){
			var previous = 37, next = 39, esc = 27;
			switch (e.keyCode) {
				case previous:
				$('.sj-book').turn('previous');
				e.preventDefault();
				break;
				case next:
				$('.sj-book').turn('next');
				e.preventDefault();
				break;
				case esc:
				zoomOut();
				e.preventDefault();
				break;
			}
		});

		// Flipbook
		flipbook.turn({
			elevation: 50,
			acceleration: !isChrome(),
			autoCenter: true,
			gradients: true,
			duration: 1000,
			pages: <%pageCount%>,
			when: {
				turning: function(e, page, view) {
					var book = $(this),
					currentPage = book.turn('page'),
					pages = book.turn('pages');

					if (currentPage>3 && currentPage<pages-3) {
						if (page==1) {
							book.turn('page', 2).turn('stop').turn('page', page);
							e.preventDefault();
							return;
						} else if (page==pages) {
							book.turn('page', pages-1).turn('stop').turn('page', page);
							e.preventDefault();
							return;
						}
					} else if (page>3 && page<pages-3) {
						if (currentPage==1) {
							book.turn('page', 2).turn('stop').turn('page', page);
							e.preventDefault();
							return;
						} else if (currentPage==pages) {
							book.turn('page', pages-1).turn('stop').turn('page', page);
							e.preventDefault();
							return;
						}
					}
					updateDepth(book, page, 'start');
					if (page>=2) {
						$('.sj-book .p2').addClass('fixed');
					} else {
						$('.sj-book .p2').removeClass('fixed');
					}
					if (page<book.turn('pages')) {
						$('.sj-book .p<%preEndPage%>').addClass('fixed');
					} else {
						$('.sj-book .p<%preEndPage%>').removeClass('fixed');
					}
					Hash.go('page/'+page).update();
				},
				turned: function(e, page, view) {
					var book = $(this);
					if (page==2 || page==3) {
						book.turn('peel', 'br');
					}
					updateDepth(book, undefined, 'end');
					$('#slider').slider('value', getViewNumber(book, page));
					book.turn('center');
				},
				start: function(e, pageObj, c) {
					corner = c;
					moveBar(true);
				},
				end: function(e, pageObj) {
					var book = $(this);
					setTimeout(function() {
						$('#slider').slider('value', getViewNumber(book));
					}, 1);
					moveBar(false);
				},
				missing: function (e, pages) {
					for (var i = 0; i < pages.length; i++) {
						addPage(pages[i], $(this));
					}
				}
			}
		});
		$('#slider').slider('option', 'max', numberOfViews(flipbook));
		flipbook.addClass('animated');
		// Show canvas
		$('#canvas').css({visibility: ''});

		// zoom
		$('.zoom-icon').bind('mouseover', function() {
			if ($(this).hasClass('zoom-icon-in')) {
				$(this).addClass('zoom-icon-in-hover');
			} else {
				$(this).addClass('zoom-icon-out-hover');
			}
		}).bind('mouseout', function() {
			if ($(this).hasClass('zoom-icon-in')) {
				$(this).removeClass('zoom-icon-in-hover');
			} else {
				$(this).removeClass('zoom-icon-out-hover');
			}
		}).bind('click', function() {
			if ($(this).hasClass('zoom-icon-in')) {
				zoomIn();
			} else {
				zoomOut();
			}
		});

		// open or close book
		flipbook.click(function(e){
			if (e.offsetX > 0 && e.offsetX < 20 && e.offsetY > 100 && e.offsetY < 490) {
				flipbook.turn('page', 1);
			} else if (e.offsetX > 940 && e.offsetX < 960 && e.offsetY > 100 && e.offsetY < 490) {
				flipbook.turn('page', <%pageCount%>);
			}
		});
	}

	// 如果宽度小于700，则使用文档显示
	if (window.screen.width <= 700) {
		$('#mainContainer').css({display: 'block'});
	} else {
		$('#canvas').css({display: 'block', visibility: 'hidden'});
		loadApp();
	}
</script>
</body>
</html>
